<template>
  <div v-loading="loading" class="dc-container">
    <el-dialog
      v-on:close="onDialogClose"
      width="60%"
      :fullscreen="false"
      title="任务流程升级" 
      v-model="visible"
      :close-on-click-modal="false"
      class="dc-el-dialog_ElDialog"
    >
      <el-row>
        <el-form :model='params' @submit.prevent label-position="right" label-width='70px' ref='queryForm' :inline-message='true'>
            <el-col :span="6">
              <el-form-item label='标题' prop='description'>
                <el-input v-model='params.description' :clearable='true' placeholder='请输入任务标题'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label='申请人' prop='applyee'>
                <el-input v-model='params.applyee' :clearable='true' placeholder='请输入申请人'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label='审批人' prop='approver'>
                <el-input v-model='params.approver' :clearable='true' placeholder='请输入审批人'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button-group>
                  <el-tooltip  effect="light" content="搜索" placement="top-start">
                    <el-button type="primary" icon="el-icon-search" @click='refresh()' :plain='true'></el-button>
                  </el-tooltip>
                    <el-tooltip  effect="light" content="重置" placement="top-start">
                    <el-button type="primary" icon="el-icon-refresh-left" @click='$refs.queryForm.resetFields()' :plain='true'></el-button>
                  </el-tooltip>
                </el-button-group> 
            </el-col>
          </el-form>
      </el-row>      
      <el-row>
        <span style="color:red">在途流程升级可能会失败。失败时建议通过以下方式处理：1. 通知流程中的处理人退回流程到发起人；2. 发起人终止当前流程，并重新发起新的流程。</span>
      </el-row>
      <el-row>
        <el-table :data='tableData' border @sort-change='onSortChange' highlight-current-row>
          <el-table-column prop='name' label='活动' sortable='custom' header-align='center' min-width='120px'></el-table-column>
          <el-table-column prop='extInfo.desc' label='标题' sortable='custom' header-align='center' min-width='240px'></el-table-column>
          <el-table-column prop='extInfo.applicantName' label='申请人' header-align='center' width='100px'></el-table-column>
          <el-table-column prop='extInfo.approverName' label='审批人' header-align='center' width='100px'></el-table-column>
          <el-table-column prop='created' label='创建时间' sortable='custom' header-align='center' align='center' width='200px'></el-table-column>
          <!--表行级操作按钮-->
          <el-table-column label='操作' header-align='center' width='85px' fixed='right'>
            <template #default='scope'>
              <OperationIcon type='primary' content='升级' placement='top-start' icon-name='el-icon-top'
                    @click='onUpgrade(scope.row)'></OperationIcon>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <template #footer>
        <span class="dialog-footer">
        <el-button v-on:click="onDialogClose">关闭</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import BaseUI from '@/views/components/baseUI'
import OperationIcon from '@/components/OperationIcon'
import { oldversionTask, upgradeProcByTask } from '@/api/wf/task'
import { parseExtInfoForList } from '@/views/wf/utils/wfUtil'
export default {
  extends: BaseUI,
  name: 'upgrade-form',
  components: {
    /** 根据用户界面配置组件 开始 */

    /** 根据用户界面配置组件 结束 */

    OperationIcon
  },
  data() {
    return {
      visible: false,
      procDef: null,
      tableData: [],
      params: {
        description: '',
        applyee: '',
        approver: '',
        sortBy: '',
        sortOrder: ''
      }
    }
  },
  props: {

  },
  computed: {},
  methods: {
    onDialogClose() {
      this.visible = false
    },
    listOldVerTask() {
      this.setLoad()
      oldversionTask(this.procDef.key,  this.params)
        .then((responseData) => {
          if (responseData.code == 100) {
            this.tableData = parseExtInfoForList(responseData.data)
          } else {
            this.showMessage(responseData)
          }
          this.resetLoad()
        })
        .catch((error) => {
          this.outputError(error)
        })
    },
    onUpgrade(task) {
      this.setLoad()
      upgradeProcByTask(task.id)
        .then((responseData) => {
          if (responseData.code == 100) {
            this.showMessage(responseData)
            this.listOldVerTask()  // 更新数据
          } else {
            this.showMessage(responseData)
          }
          this.resetLoad()
        })
        .catch((error) => {
          this.outputError(error)
        })
    },
    refresh() {
      this.listOldVerTask()
    },
    onSortChange( orderby ) {
      this.params.sortBy = orderby.prop
      this.params.sortOrder = orderby.order
      this.listOldVerTask()
    },
    openUpgradeDialog(procDef) {
      this.visible = true
      this.procDef = procDef
      this.$refs.queryForm.resetFields()
      this.listOldVerTask()
    }
  }
}
</script>
